<template>
  <div>
    <q-timeline
      class="q-pa-md tw-w-full tw-h-full"
      :side="node.model.side"
      :layout="node.model.layout"
      :color="node.model.color"
    >
      <q-timeline-entry
        v-for="item in node.model.timeline"
        :key="item.id"
        :title="item.title"
        :side="item.side"
        :subtitle="item.subtitle"
      >
        <template #title>
          <div class="q-pa-sm tw-cursor-text">
            {{ item.title }}
            <!-- <q-popup-proxy>
              <q-card>
                <q-card-section>
                  <q-input
                    @mouseleave="$emit('updateNode')"
                    label="标题"
                    v-model="item.title"
                  ></q-input>
                </q-card-section>
              </q-card>
            </q-popup-proxy> -->
          </div>
        </template>
        <template #subtitle>
          <div class="q-pa-sm tw-cursor-text">
            {{ item.subtitle }}
            <!-- <q-popup-proxy>
              <q-card>
                <q-card-section>
                  <q-input
                    @mouseleave="$emit('updateNode')"
                    label="副标题"
                    v-model="item.subtitle"
                  ></q-input>
                </q-card-section>
              </q-card>
            </q-popup-proxy> -->
          </div>
        </template>
        <div class="tw-cursor-text q-pa-md">
          <pre
            class="q-pa-md"
            v-if="node.model.contentStyle === 'default'"
            v-html="item.content"
          ></pre>
          <q-card v-else-if="node.model.contentStyle === 'card'">
            <q-card-section><pre v-html="item.content"></pre></q-card-section>
          </q-card>
          <!-- <q-popup-proxy>
            <q-card>
              <q-card-section>
                <q-editor
                  @mouseleave="$emit('updateNode')"
                  style="width: 900px"
                  :toolbar="toolbar"
                  label="内容"
                  width="100%"
                  v-model="item.content"
                  min-height="5rem"
                />
              </q-card-section>
            </q-card>
          </q-popup-proxy> -->
        </div>
      </q-timeline-entry>
      <TeleportForm :node="node">
        <template #default="{ model }">
          <div class="row q-gutter-sm">
            <q-select
              class="col"
              v-model="model.layout"
              :option-label="(opt) => opt.label"
              :option-value="(opt) => opt.value"
              emit-value
              map-options
              :options="[
                { label: '密集布局', value: 'dense' },
                { label: '平分布局', value: 'comfortable' },
                { label: '松散布局', value: 'loose' },
              ]"
            >
            </q-select>
            <q-select
              class="col"
              v-model="model.side"
              :option-label="(opt) => opt.label"
              :option-value="(opt) => opt.value"
              emit-value
              map-options
              :options="[
                { label: '内容在右侧', value: 'right' },
                { label: '内容在左侧', value: 'left' },
              ]"
            ></q-select>
          </div>
          <q-select
            label="内容风格"
            v-model="model.contentStyle"
            :option-label="(opt) => opt.label"
            :option-value="(opt) => opt.value"
            emit-value
            map-options
            :options="[
              {
                label: '默认',
                value: 'default',
              },
              {
                label: '卡片',
                value: 'card',
              },
            ]"
          >
          </q-select>
          <q-separator class="tw-mt-10px tw-mb-10px" />
          <q-list>
            <q-item-label header>时间项</q-item-label>
            <q-expansion-item
              expand-icon-toggle
              v-for="(item, index) in model.timeline"
              :key="item.id"
            >
              <template v-slot:header>
                <q-input style="flex: 1" v-model="item.title" label="标题" />
              </template>
              <div class="q-pa-md tw-bg-slate-50" style="border-radius: 0 0 8px 8px">
                <q-input class="q-mb-md" v-model="item.subtitle" label="副标题" />
                <q-select
                  class="q-mb-md"
                  v-model="item.side"
                  :option-label="(opt) => opt.label"
                  :option-value="(opt) => opt.value"
                  emit-value
                  map-options
                  label="内容位置"
                  :options="[
                    { label: '内容在右侧', value: 'right' },
                    { label: '内容在左侧', value: 'left' },
                  ]"
                ></q-select>
                <div class="tw-flex">
                  <q-btn
                    flat
                    style="flex: 1"
                    label="编辑内容"
                    @click="handleEditRowContent(item)"
                  ></q-btn>
                  <q-btn flat label="删除">
                    <q-popup-proxy>
                      <!-- <q-card>
                        <q-card-actions> -->
                      <q-btn flat v-close-popup>取消</q-btn>
                      <q-btn flat @click="model.timeline.splice(index, 1)" color="negative"
                        >确认</q-btn
                      >
                      <!-- </q-card-actions>
                      </q-card> -->
                    </q-popup-proxy>
                  </q-btn>
                </div>
              </div>

              <!-- <q-card>
              <q-card-section>
                <q-input v-model="item.title" label="标题" />
                <q-input v-model="item.subtitle" label="副标题" />
              </q-card-section>
              <q-card-actions align="right">
                <q-btn flat label="编辑内容" @click="handleEditRowContent(item)"></q-btn>
                <q-btn flat label="删除" @click="model.timeline.splice(index, 1)"></q-btn>
              </q-card-actions>
            </q-card> -->
            </q-expansion-item>
            <q-btn
              flat
              label="增加一项"
              @click="
                model.timeline.splice(index + 1, 0, {
                  title: '标题',
                  subtitle: '副标题',
                  content: '内容',
                  contentStyle: 'default',
                  id: uid(),
                })
              "
            ></q-btn>
          </q-list>
          <q-dialog full-width v-model="visible">
            <q-card>
              <q-card-section>
                <q-editor
                  height="500px"
                  @mouseleave="$emit('updateNode')"
                  :toolbar="toolbar"
                  label="内容"
                  width="100%"
                  v-model="currentRow.content"
                  min-height="5rem"
                />
              </q-card-section>
            </q-card>
          </q-dialog>
        </template>
      </TeleportForm>
    </q-timeline>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { useQuasar } from 'quasar';
import defaultProps from 'src/pages/BiographicalNotes/common/defaultProps';
import { uid } from 'quasar';
import TeleportForm from '../../TeleportForm/TeleportForm.vue';
export default defineComponent({
  name: 'TimeLine',
  props: defaultProps,
  components: { TeleportForm },
  emits: ['updateNode'],
  setup() {
    const $q = useQuasar();
    const currentRow = ref({});
    const handleEditRowContent = (row) => {
      currentRow.value = row;
      visible.value = true;
    };
    const visible = ref(false);
    const toolbar = [
      [
        {
          label: $q.lang.editor.align,
          icon: $q.iconSet.editor.align,
          fixedLabel: true,
          list: 'only-icons',
          options: ['left', 'center', 'right', 'justify'],
        },
        {
          label: $q.lang.editor.formatting,
          icon: $q.iconSet.editor.formatting,
          list: 'no-icons',
          options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code'],
        },
        {
          label: $q.lang.editor.fontSize,
          icon: $q.iconSet.editor.fontSize,
          fixedLabel: true,
          fixedIcon: true,
          list: 'no-icons',
          options: ['size-1', 'size-2', 'size-3', 'size-4', 'size-5', 'size-6', 'size-7'],
        },
      ],
      ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript', 'removeFormat'],
      ['token', 'hr', 'link', 'custom_btn'],
      ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
      ['undo', 'redo'],
    ];
    return { uid, visible, handleEditRowContent, currentRow, toolbar };
  },
});
</script>
<style lang="scss" scoped>
// .card {
//   border-radius: 8px;
//   box-shadow:
//     1px 1px 3px $primary,
//     -1px -1px 3px $primary;
// }
</style>
